<template>
    <div id="gasConsumptionComponents" class="gasConsumptionComponents pageFlex pageAlignCenter">
        <div ref="echartsRef" style="width: calc(100% - 96px); height: 100%;"></div>
        <div class="rightBox pageFlexColumn pageSpaceBetween">
            <div>
                <div class="pageFlex pageAlignCenter" v-for="(item, index) in dataList" :key="index">
                    <div class="box" :style="{background: item.color}"></div>
                    <div class="title">{{ item.name }}</div>
                </div>
            </div>
            
            <div class="text">X轴名称(单位)</div>
        </div>
    </div>
</template>
<script setup name="gasConsumptionComponents">
import { ref, onMounted, shallowRef } from "vue";
import * as echarts from "echarts";

const chart = shallowRef(null);
const echartsRef = ref(null);
const dataList = ref([
    {
        name: '本月/本年用量',
        color: 'rgba(242, 139, 2, 1)',
    },
    {
        name: '上月/去年用量',
        color: 'rgba(159, 211, 14, 1)'
    }
])
const option = ref({
    grid: {
        top: 34,
        width: '100%',
        height: 160
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: (e)=>{
            let index = (e[0].name == '本月用量' || e[0].name == '本年用量') ? 0 : 1;
            return `<span style="height: 22px;font-weight: 400;font-size: 14px;color: #1D2129;line-height: 22px;">${e[0].name}</span><br/>
            <div style="width: 8px;height: 8px;background: ${dataList.value[index].color};margin-top: 8px;display: inline-block;"></div>
            <span style="font-weight: 400;font-size: 12px;color: #4E5969;">用量</span>
            <span style="font-weight: 500;font-size: 12px;color: #1D2129;margin-left: -4px;">${e[0].value}m³</span>`
        }
    },
    xAxis: {
        type: 'value',
        nameTextStyle:{
            fontSize: 12
        },
        axisLabel:{
            color: '#86909C'
        },
        splitLine:{
            lineStyle:{
                color: '#E5E6EB',
                type: 'dashed',
                dashOffset: 10
            }
        },
    },
    yAxis:{
        type: 'category',
        boundaryGap: true,
        data: ['去年用量','本年用量', '上月用量', '本月用量'],
        nameTextStyle:{
            fontSize: 12
        },
        axisLine:{
            lineStyle:{
                color: '#C9CDD4'
            }
        },
        axisTick:{
            length: 4,
            alignWithLabel: true,
            onZero: false,
            lineStyle: {
                color: '#C9CDD4'
            }
        },
        axisLabel:{
            color: '#86909C'
        },
        axisPointer:{
            show: true,
            type: 'shadow',
            shadowStyle:{
                color: 'rgba(78,89,105,0.05)',
            }
        }
    },
    series: [
        {
            name: '用量',
            type: 'bar',
            stack: 'total',
            label: {
                show: false,
            },
            emphasis: {
                focus: 'series'
            },
            barWidth: 16,
            data: [0, 0, 0, 0],
            itemStyle: {
                color: (e)=>{
                    let index = (e.name == '本月用量' || e.name == '本年用量') ? 0 : 1;
                    return dataList.value[index].color
                }
            }
        },
    ]
})
onMounted(()=>{
    window.addEventListener('resize', resizeCharts);
    nextTick(()=>{
        chart.value = echarts.init(echartsRef.value);
        chart.value.setOption(option.value);
        getChartsData();
    })
})
function getChartsData(){
    option.value.series[0].data = [320, 302, 130, 100];
    chart.value.setOption(option.value);
}
function resizeCharts(){
    chart.value.showLoading('default',{
        text: '',
        lineWidth: 2
    })
    let dom = document.getElementById('gasConsumptionComponents');
    if(dom){
        chart.value.resize(dom.offsetWidth - 92 - 39);
    }
    chart.value.clear();
    chart.value.setOption(option.value);
    chart.value.hideLoading();
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/public.scss";
.gasConsumptionComponents{
    width: 100%;
    height: 100%;
    padding-right: 39px;
    .rightBox{
        width: 90px;
        height: 100%;
        padding-bottom: 15px;
        margin-left: 6px;
        .box{
            width: 8px;
            height: 8px;
        }
        .title{
            height: 20px;
            font-weight: 400;
            font-size: 12px;
            color: #4E5969;
            line-height: 20px;
            margin-left: 4px;
        }
        .text{
            height: 20px;
            font-weight: 400;
            font-size: 12px;
            color: #86909C;
            line-height: 20px;
        }
    }
}
</style>